#{extends 'CRUD/layout.html' /}
#{set title:messages.get('crud.show.title', type.modelName) /}

<div id="crudShow" class="${type.name}">

    <h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>
	
    <div class="objectForm">
    #{form action:@save(object._key()), enctype:'multipart/form-data'}
    	#{crud.form /} 
    	<p class="crudButtons">
            <input type="submit" name="_saveAndContinue" value="&{'crud.save', type.modelName}" />            
        </p>
    	 	<h2 id="crudShowTitle">Ramas
    	 	<img id="addRama" src="/public/images/Add.png" alt="Add">
    	 	</h2>
			<div class="ramas">
				<table>			
					#{list items:ramas, as:'rama'}				
						<tr>
							#{if rama.id.toString().equals(selectedRama)}
								<td  class="rama selectedRama">
									<a href="#">
							#{/if}
							#{else}
							<td>
								<a href="@{Sectores.selectRama(object.id, rama.id)}" class="rama" >
							#{/else}
								${rama.descripcion}
								</a>
							</td>
							<td>
								<a href="@{Ramas.show(rama.id)}" class="rama" >Edit</a>
							</td>
						</tr>
					#{/list}
				</table>	
			</div>

			
			#{if selectedRama!=null}
			<h2 id="crudShowTitle">Rubros
			<img id="addRubro" src="/public/images/Add.png" alt="Edit">
			</h2>
			<div class="rubros">
				<table>			
					#{list items:rubros, as:'rubro'}
						<tr>
							#{if rubro.id.toString().equals(selectedRubro)}
								<td class="rubro selectedRubro">
									<a href="#">
							#{/if}
							#{else}
								<td>
								<a href="@{Sectores.selectRubro(object.id, selectedRama, rubro.id)}" class="rubro" >
							#{/else}
								${rubro.descripcion}
								</a>
							</td>
							<td>
								<a href="@{Rubros.show(rubro.id)}" class="rubro" >Edit</a>
							</td>
						</tr>
					#{/list}
				</table>
			</div>	
			#{/if}
			
			#{if selectedRubro!=null}
			<h2 id="crudShowTitle">Subrubros
			<img id="addSubrubro" src="/public/images/Add.png" alt="Edit">
			</h2>
			<div class="subrubros">
				<table>			
					#{list items:subrubros, as:'subrubro'}
						<tr>
							<td>
							${subrubro.descripcion}
							</td>
							<td>
								<a href="@{SubRubros.show(subrubro.id)}" class="subrubro" >Edit</a>
							</td>
						</tr>
					#{/list}
				</table>	
			</div>
			#{/if}
			        
    #{/form}
    </div>

</div>

<div id="dialog-rama"  class="dialogSectores" style="display: none" class="dialog-style">
	#{form action:@Ramas.create(), id:'rama-form', enctype:'multipart/form-data'}
		<input type="hidden" name="sectorId" value="${object._key()}">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Rama'}</h2>
		<div class="objectForm">
			<div class="crudField crud_text" style="height: 50px;">
				<label for="object_descripcion" >
	        		descripcion
	    		</label>
	    		<input id="object_descripcion" type="text" name="rama.descripcion" value="" style="float: right;" size="40">			    
			</div>
		</div>
		<input type="submit" name="_save" value="&{'crud.save', type.modelName}" style="margin-top: 10px;"/>	
	#{/form}
</div>

<div id="dialog-rubro"  class="dialogSectores" style="display: none" class="dialog-style">
	#{form action:@Rubros.create(), id:'rubro-form', enctype:'multipart/form-data'}
		<input type="hidden" name="sectorId" value="${object._key()}">
		<input type="hidden" name="ramaId" value="${selectedRama}">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Rubro'}</h2>
		<div class="objectForm">
			<div class="crudField crud_text" style="height: 50px;">
				<label for="object_descripcion">
	        		descripcion
	    		</label>
	    		<input id="object_descripcion" class="" type="text" name="rubro.descripcion" value="" size="40">			    
			</div>
		</div>
		<input type="submit" name="_save" value="&{'crud.save', type.modelName}" style="margin-top: 10px;"/>
	#{/form}
</div>

<div id="dialog-subrubro" class="dialogSectores" style="display: none" class="dialog-style">
	#{form action:@Subrubros.create(), id:'subrubro-form', enctype:'multipart/form-data'}
		<input type="hidden" name="sectorId" value="${object._key()}">
		<input type="hidden" name="ramaId" value="${selectedRama}">
		<input type="hidden" name="rubroId" value="${selectedRubro}">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Subrubro'}</h2>
		<div class="objectForm">
			<div class="crudField crud_text" style="height: 50px;">
				<label for="object_descripcion">
	        		descripcion
	    		</label>
	    		<input id="object_descripcion" class="" type="text" name="subrubro.descripcion" value="" size="40">			    
			</div>
		</div>
		<input type="submit" name="_save" value="&{'crud.save', type.modelName}" style="margin-top: 10px;"/>
	#{/form}
</div>
<script type="text/javascript">
$().ready(function() {
	
	$( "#dialog-rama").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	$( "#dialog-rubro").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	$( "#dialog-subrubro").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#addRama" ).click(function() {
		$( "#dialog-rama" ).dialog( "open" );
		return false;
	});
	$( "#addRubro" ).click(function() {
		$( "#dialog-rubro" ).dialog( "open" );
		return false;
	});
	$( "#addSubrubro" ).click(function() {
		$( "#dialog-subrubro" ).dialog( "open" );
		return false;
	});
});
</script>
